<template>
  <div id="app" :class="{'fixed-warp-body': $is_from_wx}">
    <!-- 产品要求返回固定跳回用户中心。因为有可能返回订单支付页面 -->
    <nav-bar :title="pageTitle" left-arrow @clickLeft="$goPage('profile')" />

    <van-search
      v-model="temp_search_key"
      placeholder="单号/产品名/预订人/手机号"
      show-action
      @search="onSearch"
      @clear="onSearch"
    >
      <div slot="action" class="c-main" @click="onSearch">搜索</div>
    </van-search>

    <van-tabs v-model="activeTabType" @change="changeTabs" sticky>
      <van-tab
        v-for="menu in tab_menu"
        :key="menu.key"
        :name="menu.key"
        :title="menu.name"
      >
        <order-list :query_str="search_key" :order_state="menu.key" :isActive="activeTabType === menu.key" />
      </van-tab>
    </van-tabs>

    <slogan />

    <div class="fixed-warp" v-if="$is_from_wx">
      <van-button
        size="large"
        type="default"
        plain
        hairline
        @click="$goPage('profile')"
      >返回用户中心</van-button>
    </div>
  </div>
</template>

<script>
  import {
    Icon,
    Search,
    Tabs,
    Tab,
    Button,
  } from 'vant'
  import NavBar from "@cmpt/header/navbar"
  import OrderList from '@views/order/components/order-list'
  import Slogan from '@cmpt/slogan'

  import {
    getRole
  } from '@utils/role'

  import {
    getOrderList,
  } from "@api/modules/order"
  import {
    ORDER_LIST_TAB
  } from '@utils/default_config';

  const TAB_MENU = [{
    name: '全部订单',
    key: '-999'
  }].concat(ORDER_LIST_TAB)

  export default {
    name: 'order-tab-list',
    components: {
      [Icon.name]: Icon,
      [NavBar.name]: NavBar,
      [Search.name]: Search,
      [Tabs.name]: Tabs,
      [Tab.name]: Tab,
      [Button.name]: Button,

      OrderList,
      Slogan,
    },

    data() {
      return {
        role: getRole(),
        temp_search_key: this.$getUrlParam('search_key') || '', // 搜索输入框的内容
        search_key: this.$getUrlParam('search_key') || '', // 点击搜索时设置的 search_key
        activeTabType: this.$getUrlParam('type') || TAB_MENU[0].key,
        tab_menu: TAB_MENU,
      }
    },

    computed: {
      pageTitle() {
        return this.role === '0' ? '我的订单' : '采购订单'
      },
    },

    methods: {
      onSearch() {
        this.search_key = this.temp_search_key.trim()
        this.$mergePageParams({
          search_key: this.search_key
        })
      },

      changeTabs(key) {
        this.$mergePageParams({
          type: key
        })
      }

    },

    created() {
      this.$set_page_title(this.pageTitle)
    },

  }
</script>

<style lang="less" src="@style_m/mod/order-detail.less"></style><style lang="less" scoped>
  @import '~@style_m/basic/utils/index.less';

  .fixed-warp {
    .van-button {
      border-radius: 0;
    }
  }
</style>
